<template>
   <el-container class="layout-container">
        <el-aside class="aside" :width="isCollapse ? '60px' : '200px'">
          <div class="logo" :class="{minLogo:isCollapse}"></div>
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            router
            :collapse="isCollapse"
            background-color="#002033"
            text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item index="/">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item index="/article">
                <i class="el-icon-document"></i>
                <span slot="title">内容管理</span>
            </el-menu-item>
            <el-menu-item index="/image">
                <i class="el-icon-picture"></i>
                <span slot="title">素材管理</span>
            </el-menu-item>
            <el-menu-item index="/addArticle">
                <i class="el-icon-s-promotion"></i>
                <span slot="title">发布文章</span>
            </el-menu-item>
            <el-menu-item index="/comment">
                <i class="el-icon-chat-dot-round"></i>
                <span slot="title">评论管理</span>
            </el-menu-item>
            <el-menu-item index="/fans">
                <i class="el-icon-setting"></i>
                <span slot="title">粉丝管理</span>
            </el-menu-item>
            <el-menu-item index="/settings">
                <i class="el-icon-user"></i>
                <span slot="title">个人设置</span>
            </el-menu-item>
          </el-menu>

        </el-aside>
        <el-container>
            <el-header class="header">
              <div>
                <i class="isCollapse? 'el-icon-s-unfold' : el-icon-s-fold" @click="isCollapse=!isCollapse"></i>
                <span>江苏传智播客科技教育有限公司</span>
              </div>

              <el-dropdown>
                <span class="el-dropdown-link">
                  <img class="avatar" :src="user.photo" alt="">
                  {{user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>设置</el-dropdown-item>
                  <el-dropdown-item @click.native="Quit">退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-header>
            <el-main class="main">
              <router-view></router-view>
            </el-main>
    </el-container>
</el-container>

</template>

<script>
export default {
  name: 'Layout',
  data () {
    return {
      user: {},
      isCollapse: false
    }
  },
  methods: {
    getInfo () {
      // 进入主页面  发送请求  得到用户的信息和头像
      // 验证token   如果token存在则调接口
      // const token = JSON.parse(localStorage.getItem('token'))
      this.$http({
        method: 'GET',
        url: '/mp/v1_0/user/profile'
        // headers: {
        //   Authorization: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MzA3NTgyNDAsInVzZXJfaWQiOjEsInJlZnJlc2giOmZhbHNlLCJ2ZXJpZmllZCI6dHJ1ZX0.BDwant0g_j0i7PPyZn68tWgcFctEyDI7FlezrpEHCCE'
        // }
      }).then(res => {
        // console.log('这是' + res)
        this.user = res.data.data
      })
    },
    Quit () {
      this.$confirm('确定退出吗？', '提示', {
        confirmButtonText: '确定',
        canceButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除本地 localStorage中的信息
        localStorage.removeItem('token')
        // 回去登录页
        this.$router.push('/login')
      }).catch(() => {
        // 用户取消了
      })
    }
  },
  created () {
    // 接受eventBus事件
    this.$eventBus.$on('update_user_photo', (newPhoto) => {
      // 把newphoto更新到数据项中
      this.user.photo = newPhoto
    })
    // 接受eventBus事件
    this.$eventBus.$on('update_user_name', (newName) => {
      // 把newName更新到数据项中
      this.user.name = newName
    })
    this.getInfo()
  }
}
</script>
<style lang='less'>
   /* 外层的容器
    占满整个页面
  */
  .layout-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.aside {
  background-color: #002033;
  .el-menu {
    border-right: none;
  }
  .logo{
      width: 100%;
      height: 60px;
      background: #002244 url(../../assets/logo_admin.png) no-repeat center / 140px auto;
    }
    // 覆盖background 的图片和大小，类写在logo的下方。
    .minLogo{
      background-image: url(../../assets/logo_admin_01.png);
      background-size: 36px auto;
    }
}
.nav-menu {
  .iconfont {
    margin-right: 10px;
    padding-left: 5px;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  .el-dropdown-link {
    display: flex;
    align-items: center;
    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
}
.main {
  background-color: #e9eef3;
}
</style>
